<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    list:{
      type: Array,
      default: []
    }
  })

  const leftLen = computed(() => {
    return props.list.filter((item) =>  !item.default).length
  })

  const emit = defineEmits()
</script>

<template>
  <footer class="footer">
    <!-- 待办事项数量统计 -->
    <span class="todo-count"><strong>{{ leftLen }}</strong> item left</span>
    
    <!-- 筛选器：切换显示全部/活跃/已完成待办 -->
    <ul class="filters">
      <li>
        <a href="#/" class="selected">All</a> <!-- 全部：默认选中 -->
      </li>
      <li>
        <a href="#/active">Active</a> <!-- 活跃（未完成） -->
      </li>
      <li>
        <a href="#/completed">Completed</a> <!-- 已完成 -->
      </li>
    </ul>
    
    <!-- 清除已完成待办的按钮 -->
    <button class="clear-completed" @click="emit('del-completed')">
      Clear completed
    </button>
  </footer>
</template>